<template>
  <div class="container" :style="'min-height: ' + $docHeight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="bannerCont">
        <img class="bannerImg" src="/img/banner/5.png" />
      </div>
      <div class="formCont">
        <div class="formTitle">需求发布信息完善</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">项目名称</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.project_name"
            maxlength="20"
            placeholder="请输入项目名称"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">项目预算</div>
          </div>
          <input
            class="inputText"
            type="digit"
            v-model="formInfo.project_budget"
            maxlength="8"
            placeholder="项目预算大概多少元?"
          />
          <div class="inputtag">元</div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">项目周期</div>
          </div>
          <input
            class="inputText"
            type="digit"
            v-model="formInfo.project_cycle"
            maxlength="2"
            placeholder="项目开发周期?"
          />
          <div class="inputtag">个月内完成</div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">接单经验</div>
          </div>
          <input
            class="inputText"
            type="digit"
            v-model="formInfo.jdjy"
            maxlength="2"
            placeholder="接单经验年限?"
          />
          <div class="inputtag">年以上</div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">接单群体</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="jdqtShow = true"></div>
            <input v-model="formInfo.jdqt" placeholder="选择接单群体" />
          </div>
          <div @click="jdqtShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">办公要求</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="bgyqShow = true"></div>
            <input v-model="formInfo.bgyq" placeholder="选择办公要求" />
          </div>
          <div @click="bgyqShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput" v-if="formInfo.bgyq == '仅限驻场'">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">驻场城市</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="workCityShow = true"></div>
            <input v-model="formInfo.workCity" placeholder="选择驻场城市" />
          </div>
          <div @click="workCityShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">截投日期</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="end_timeShow = true"></div>
            <input v-model="formInfo.end_time" placeholder="选择投标结束日期" />
          </div>
          <div @click="end_timeShow = true" class="iconfont icon-xiala"></div>
        </div>
      </div>
      <div class="formCont hasTop">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div class="mustIcon">*</div>
            <div>工作内容描述</div>
          </div>
        </div>
        <div class="formArea">
          <!-- <textarea id="myTextarea" ref="myTextarea" placeholder="This is the first line.
    This is the second line.
    This is the third line." rows="4" cols="20"></textarea> -->
          <van-field
            v-model="formInfo.project_describe"
            rows="4"
            autosize
            id="myTextarea"
            style="background: none; font-size: 0.7rem"
            type="textarea"
            maxlength="1000"
            placeholder="可以参考一下内容:
1.您的产品/公司/业务的简短介绍
2.需求的核心工作内容
3.对开发者的其他要求等"
            show-word-limit
          />
        </div>
      </div>
      <div class="saveBtn" @click="subFn">确认发布需求</div>
    </div>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="jdqtShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">选择接单群体</div>
        <div class="maskCheck">
          <div
            @click="jdqtFn(item)"
            :class="
              item.id == jdqtId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in jdqtArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="jdqtSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="bgyqShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">选择办公要求</div>
        <div class="maskCheck">
          <div
            @click="bgyqFn(item)"
            style="width: 48%"
            :class="
              item.id == bgyqId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in bgyqArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="bgyqSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="workCityShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择你所在的城市</div>
        <van-area
          :columns-num="2"
          @change="workCityChange"
          confirm-button-text=""
          cancel-button-text=""
          :area-list="areaList"
        />
        <div class="maskBtn" @click="workCitySureFn">确认选择</div>
      </div>
    </van-popup>
    <subLoad v-if="showSub"></subLoad>
    <van-calendar
      @confirm="sureend_timeFn"
      v-model:show="end_timeShow"
      :show-confirm="false"
    />
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { showSuccessToast, showToast, showConfirmDialog } from "vant";
import subLoad from "@/components/public/subLoad.vue";
import { projectDemand } from "@/http/api";
export default {
  components: { subLoad },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      jdqtShow: false,
      bgyqShow: false,
      end_timeShow: false,
      workCityShow: false,
      formInfo: {
        project_name: "",
        project_budget: "",
        jdjy: "",
        project_cycle: "",
        jdqt: "",
        bgyq: "",
        end_time: "",
        project_describe: "",
        workCity: "",
      },
      areaList: areaList,
      jdqtArr: [
        { name: "企业或个人", id: 0 },
        { name: "仅限企业", id: 1 },
        { name: "仅限个体", id: 2 },
      ],
      bgyqArr: [
        { name: "远程办公", id: 0 },
        { name: "仅限驻场", id: 1 },
      ],
      jdqtId: 0,
      bgyqId: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    //选择城市
    workCityChange(selectedValues, selectedOptions) {
      if (selectedValues.selectedOptions.length > 0) {
        this.formInfo.workCity = selectedValues.selectedOptions[1].text;
      }
    },
    workCitySureFn() {
      if (this.formInfo.workCity == "") {
        this.formInfo.workCity = "北京市";
      }
      this.workCityShow = false;
    },

    sureend_timeFn(time) {
      let year = time.getFullYear();
      let mounth = time.getMonth() + 1;
      let day = time.getDate();
      // new Date().getMonth()
      console.log(year + "-" + mounth + "-" + day);
      this.formInfo.end_time = year + "-" + mounth + "-" + day;
      this.end_timeShow = false;
    },
    bgyqFn(item) {
      this.formInfo.bgyq = item.name;
      this.bgyqId = item.id;
    },
    bgyqSureFn() {
      if (this.formInfo.bgyq == "") {
        this.formInfo.bgyq = "远程办公";
      }
      this.bgyqShow = false;
    },
    //接单群体
    jdqtFn(item) {
      this.formInfo.jdqt = item.name;
      this.jdqtId = item.id;
    },
    jdqtSureFn() {
      if (this.formInfo.jdqt == "") {
        this.formInfo.jdqt = "企业或个体";
      }
      this.jdqtShow = false;
    },
    subFn() {
      let data = this.formInfo;
      if (!data.project_name) {
        showToast("请输入项目名称");
        return false;
      } else if (!data.project_budget) {
        showToast("请输入项目预算");
        return false;
      } else if (!data.project_cycle) {
        showToast("请输入项目研发周期");
        return false;
      } else if (!data.jdjy) {
        showToast("请输入项目接单年限");
        return false;
      } else if (!data.jdqt) {
        showToast("请选择接单群体");
        return false;
      } else if (!data.bgyq) {
        showToast("请选择办公要求");
        return false;
      } else if (data.bgyq == "仅限驻场" && !data.workCity) {
        showToast("请选择驻场城市");
        return false;
      } else if (!data.end_time) {
        showToast("请选择截投日期");
        return false;
      } else if (!data.project_describe) {
        showToast("请输入工作内容");
        return false;
      }
      delete data.workCity;
      showConfirmDialog({
        title: "发布提示",
        message: "发布成功之后需求将无法取消。",
        confirmButtonText: "确认发布",
      }).then(() => {
        this.showSub = true;
        projectDemand(data)
          .then((res) => {
            if (res.data.code == 1) {
              showConfirmDialog({
                title: "操作提示",
                confirmButtonText: "列表查看",
                message:
                  "需求发布成功，等待工作人员审核，审核通过后将公布在程序员端需求大厅。",
              })
                .then(() => {
                  this.$router.push({ path: "/order" });
                })
                .catch(() => {});
            } else {
              showToast(res.data.msg);
            }
            this.showSub = false;
          })
          .catch((res) => {
            this.showSub = false;
          });
      });
    },
  },
  mounted() {},
  created() {
    this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.container {
  padding-bottom: 0.75rem;
  box-sizing: border-box;
  background-color: #f1f4fb;
  // padding-top: 0.75rem;
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    margin-top: -1.5rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    .formTitle {
      font-size: 0.7rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .formInput {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #f1f4fb;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 4rem;
        position: relative;
        .mustIcon {
          font-size: 0.7rem;
          top: 0rem;
          left: -0.4rem;
          position: absolute;
          color: #ff5757;
        }
      }
      .resultTag {
        color: #5cc78e;
        font-size: 1rem;
      }
      .icon-xiala {
        width: 1.5rem;
        font-size: 0.8rem;
        color: #ccc;
        text-align: center;
      }
      .inputOut {
        flex: 1;
        width: 3rem;
        position: relative;
        .inputMask {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        input {
          width: 90%;
          border: none;
          background: none;
          outline: none;
        }
      }
      .inputText {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
    }
  }
  .hasTop {
    margin-top: -0.5rem;
  }
  .flexTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .addComp {
      font-size: 0.65rem;
      font-weight: normal;
      color: #86a9fb;
    }
    .formTitleMust {
      position: relative;
      display: flex;
      .mustIcon {
        font-size: 0.7rem;
        top: 0rem;
        left: -0.4rem;
        position: absolute;
        color: #ff5757;
      }
    }
  }
  .formArea {
    background-color: #f1f4fb;
    border-radius: 0.25rem;
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskForm {
      width: 100%;
      .formTitle {
        font-size: 0.7rem;
        font-weight: bold;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        position: relative;
        .mustIcon {
          color: #ff5757;
          margin-right: 0.25rem;
        }
      }
      .upProduct {
        margin-bottom: 1.25rem;
      }
      .formInput {
        display: flex;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        background-color: #f1f4fb;
        margin-bottom: 1rem;
        border-radius: 1.5rem;
        .inputName {
          width: 4rem;
          position: relative;
          .mustIcon {
            font-size: 0.7rem;
            top: 0rem;
            left: -0.4rem;
            position: absolute;
            color: #ff5757;
          }
        }
        .resultTag {
          color: #5cc78e;
          font-size: 1rem;
        }
        .icon-xiala {
          width: 1.5rem;
          font-size: 0.8rem;
          color: #ccc;
          text-align: center;
        }
        .inputOut {
          flex: 1;
          width: 3rem;
          position: relative;
          .inputMask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          input {
            width: 90%;
            border: none;
            background: none;
            outline: none;
          }
        }
        .inputText {
          flex: 1;
          width: 3rem;
          border: none;
          background: none;
          outline: none;
        }
      }
    }
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
      .maskHeadTip {
        font-size: 0.6rem;
        font-weight: normal;
        color: #999;
        text-align: center;
      }
      .redTip {
        color: #ff5757;
      }
    }
    .workTimeCont {
      .workTimeItem {
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        background-color: #f1f4fb;
        border-radius: 0.25rem;
        margin-bottom: 0.75rem;
        .timeItemHead {
          display: flex;
          align-items: center;
          margin-bottom: 0.75rem;
          .timeCheck {
            width: 1rem;
            height: 1rem;
            border: 1px solid #86a9fb;
            background-color: #fff;
            font-size: 1rem;
            border-radius: 0.25rem;
            text-align: center;
            line-height: 1rem;
            margin-right: 0.5rem;
            color: #fff;
          }
          .activeCheck {
            background-color: #86a9fb;
          }
          .timeHeadName {
            font-size: 0.8rem;
            font-weight: bold;
          }
        }
        .checkItem {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
          margin-bottom: 0.5rem;
          .checkItemVal {
            display: flex;
            align-items: center;
            .iconfont {
              margin-left: 0.25rem;
              font-size: 0.8rem;
              color: #999;
            }
          }
        }
      }
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 30%;
        text-align: center;
        background-color: #f1f4fb;
        padding: 0.55rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
        border: 1px solid #86a9fb;
        box-sizing: border-box;
        color: #86a9fb;
      }
      .maskCheckItemActive {
        background-color: #86a9fb;
        color: #fff;
      }
    }
    .sildNum {
      margin: 0.25rem auto 2rem;
      font-size: 1rem;
      text-align: center;
      span {
        color: #86a9fb;
      }
    }
    .smallText {
      font-size: 0.8rem;
    }
    .sliderCont {
      width: 80%;
      margin: 0 auto;
    }
    .maskCtrl {
      display: flex;
      justify-content: space-between;
      .maskBtn {
        width: 48%;
      }
      .whiteMaskBtn {
        background-color: #fff;
        color: #86a9fb;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.6rem 0;
      background-color: #86a9fb;
      border: 1px solid #86a9fb;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .disMaskBtn {
      opacity: 0.5;
    }
  }
  .saveBtn {
    padding: 0.75rem 0;
    background-color: #86a9fb;
    color: #fff;
    text-align: center;
    border-radius: 2rem;
    width: 92%;
    margin: 0 auto 0.75rem;
  }
}
</style>
<style>
.van-calendar__day,
.van-calendar__selected-day,
.van-calendar__weekday,
.van-calendar__header-subtitle,
.van-calendar__header-title {
  font-size: 0.7rem;
}
</style>
